<template>
  <div class="vue-component-02">
    <MedoVProgress1 :options="progressOptions"></MedoVProgress1>
    <MedoVProgress1 :options="progressOptions2"></MedoVProgress1>
  </div>
</template>

<script setup>
import { reactive, toRefs } from "vue";
import MedoVProgress1 from "@/components/vue-common/MedoVProgress1.vue";

const data = reactive({
  progressOptions: {
    width: 127,
    height: 0,
    color: "#7affff",
    backColor: "#012E29",
    percentage: 50,
    content: "良",
    startText: "0",
    endText: "5千",
    description: "≤5千吨",
  },
  progressOptions2: {
    width: 127,
    height: 0,
    color: "#00affe",
    backColor: "#012E29",
    percentage: 70,
    content: "正常",
    startText: "0",
    endText: "1万",
    description: "5千-1万吨",
  },
});

const { progressOptions, progressOptions2 } = toRefs(data);
</script>

<style scoped lang="less">
.vue-component-02 {
  display: flex;
  justify-content: space-around;
  width: 500px;
  background-color: #061740;
  padding: 20px;
}
</style>
